<template>
  <page-header-wrapper :title="false">
    <a-card
      title="数据统计"
    >
      <template slot="extra">
        <a-button type="primary" @click="exportData">导出EXCEL</a-button>
      </template>
      <div class="table-page-search-wrapper">
        <a-form-model :model="queryParam" layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="统计时间">
                <a-range-picker v-model="queryParam['time']" @change="onChangeTime"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="顾问姓名">
                <a-select showSearch :filter-option="filterOption" v-model="queryParam['filter[uid]']" placeholder="请选择顾问姓名">
                  <a-select-option v-for="item in userOpts" :key="item.uid" :value="item.uid">{{item.username}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="6" :sm="24">
                <a-form-model-item label="在职状态">
                  <a-select v-model="queryParam['filter[work_status]']" placeholder="请选择在职状态">
                    <a-select-option v-for="(item, index) in statusOpts" :key="index" :value="index">{{item}}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="用户状态">
                  <a-select v-model="queryParam['filter[status]']" placeholder="请选择用户状态">
                    <a-select-option v-for="(item, index) in userStatus" :key="index" :value="index">{{item}}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="onSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="table-operator">
        <a-spin :spinning="spinning">
          <a-collapse accordion expand-icon-position="right" @change="onCollapse">
            <a-collapse-panel v-for="(item, index) in stateData" :key=index>
              <template slot="header">
                {{item.name_format}}
                <a-divider type="vertical" />
                总人数 <a>{{item.total_people}}</a>
                <a-divider type="vertical" />
                总领取数 <a>{{item.total_receive}}</a>
                <a-divider type="vertical" />
                总业务收款额 <a>{{item.total_amount}}</a>
                <a-divider type="vertical" />
                总代理费 <a>{{item.total_agency_fee}}</a>
              </template>
              <a-collapse accordion @change="onCollapseChildren">
                <a-collapse-panel v-for="(item1, index1) in item.children" :key=index1>
                  <template slot="header">
                    {{item1.name_format}}组
                    <a-divider type="vertical" />
                    总人数 <a>{{item1.total_people}}</a>
                    <a-divider type="vertical" />
                    总领取数 <a>{{item1.total_receive}}</a>
                    <a-divider type="vertical" />
                    总业务收款额 <a>{{item1.total_amount}}</a>
                    <a-divider type="vertical" />
                    总代理费 <a>{{item1.total_agency_fee}}</a>
                  </template>
                  <a-table
                    bordered
                    size="small"
                    :pagination="false"
                    :columns="activeColumns"
                    :data-source="item1.children"
                  >
                    <template slot="work_status" slot-scope="text">
                      <a-tag color="blue" v-if="text == 10">在职</a-tag>
                      <a-tag color="red" v-if="text == 20">离职</a-tag>
                    </template>
                    <template slot="footer">
                      <a-table
                        size="small"
                        :columns="activeColumnsz"
                        :data-source="activeChildren"
                        :bordered="false"
                        :pagination="false"
                        :showHeader="false"
                      >
                        <template slot="total">汇总</template>
                        <template slot="total_people" slot-scope="text">{{text}}</template>
                        <template slot="total_amount" slot-scope="text">{{text}}</template>
                        <template slot="total_agency_fee" slot-scope="text">{{text}}</template>
                        <template slot="total_receive" slot-scope="text">{{text}}</template>
                      </a-table>
                    </template>
                  </a-table>
                </a-collapse-panel>
              </a-collapse>
            </a-collapse-panel>
          </a-collapse>
        </a-spin>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import stateColumns from '@/columns/state'
import { getStateData } from '@/api/state'
import apis from '@/api'
import storage from 'store'
import { ACCESS_TOKEN, COMPANY } from '@/store/mutation-types'

export default {
  name: 'State',
  data () {
    return {
      activeKey: '1',
      queryParam: {
        time: []
      },
      userOpts: {},
      activeColumns: stateColumns.state,
      stateData: [],
      statusOpts: {},
      activeColumnsz: stateColumns.footer_total,
      activeChildren: [
        {
          total_people: 0,
          total_receive: 0,
          total_agency_fee: 0,
          total_amount: 0
        }
      ],
      exportParams: '',
      company: storage.get(COMPANY),
      acesstoken: storage.get(ACCESS_TOKEN),
      exportUrl: apis.ExportStateData,
      advanced: true,
      spinning: true,
      keys: [],
      userStatus: {},
      defaultOpts: {}
    }
  },
  created () {
    this.getStateData()
  },
  methods: {
    moment,
    getStateData (params) {
      const app = this
      app.spinning = true
      getStateData(params).then(res => {
        if (res.status === 0) {
          app.stateData = res.result.data
          app.userOpts = res.result.user_opts
          app.statusOpts = res.result.work_status_opts
          app.userStatus = res.result.status_opts
        } else {
          app.$warning({
            title: res.msg
          })
        }
      }).finally(() => {
        app.spinning = false
      })
    },
    onSearch () {
      this.getStateData(this.queryParam)
    },
    exportData () {
      const app = this
      for (const k in app.queryParam) {
        app.exportParams = app.exportParams + ('&' + k + '=' + app.queryParam[k])
      }
      app.exportUrl = app.exportUrl + '?access_token=' + app.acesstoken + '&company=' + app.company + app.exportParams
      app.$confirm({
        title: '是否导出所筛选的数据',
        onOk: () => {
          window.open(process.env.VUE_APP_API_BASE_URL + app.exportUrl)
        }
      })
    },
    filterOption (input, option) {
      return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0)
    },
    resetForm () {
      this.queryParam = {}
      this.queryParam['time'] = []
      this.getStateData()
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    onChangeTime (date, dateString) {
      this.queryParam['filter[time_start]'] = dateString[0]
      this.queryParam['filter[time_end]'] = dateString[1]
    },
    onCollapseChildren (key) {
      this.keys[1] = key
      this.activeChildren[0].total_people = this.stateData[this.keys[0]].children[this.keys[1]].total_people
      this.activeChildren[0].total_receive = this.stateData[this.keys[0]].children[this.keys[1]].total_receive
      this.activeChildren[0].total_agency_fee = this.stateData[this.keys[0]].children[this.keys[1]].total_agency_fee
      this.activeChildren[0].total_amount = this.stateData[this.keys[0]].children[this.keys[1]].total_amount
    },
    onCollapse (key) {
      this.keys[0] = key
    }
  }
}
</script>

<style scoped>
/deep/ .ant-table-small > .ant-table-content > .ant-table-footer {
  padding: 0px;
}
/deep/ .ant-table-footer .ant-table-small {
  border: 0;
}
/deep/ .ant-table-footer .ant-table-content {
  border-right: 0;
}
</style>
